<template>
  <div>
    <div class="app-container form-box" v-loading="loading">
      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        :disabled="formDisabled"
        label-width="150px"
      >
        <el-collapse v-model="activeNames">
          <!-- 基本信息 -->
          <el-collapse-item name="基本信息" disabled>
            <template #title>
              <TitleName
                title="基本信息"
                icon="i-carbon-bookmark-filled"
                class="text-#000"
              ></TitleName
              ><!-- px-30  -->
            </template>
            <el-row :gutter="80">
              <el-col :span="12">
                <el-form-item label="单据编号" prop="number">
                  <el-input
                    disabled
                    v-model="formData.number"
                    placeholder="请输入单据编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据日期" prop="receiptsDate">
                  <el-date-picker
                    style="width: 100%"
                    v-model="formData.receiptsDate"
                    type="date"
                    placeholder="单据日期"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="属性" prop="property">
                  <el-radio-group v-model="formData.property">
                    <el-radio
                      v-for="item in order_property"
                      :key="item.value"
                      :label="item.value"
                      >{{ item.label }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商编码" prop="customerNumber">
                  <el-input
                    disabled
                    v-model="formData.customerNumber"
                    placeholder="请输入供应商编码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商名称" prop="customerName">
                  <el-input
                    disabled
                    v-model="formData.customerName"
                    placeholder="请输入供应商名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商联系人 " prop="contactName">
                  <el-input
                    disabled
                    v-model="formData.contactName"
                    placeholder="请输入供应商联系人 "
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" prop="deptName">
                  <el-input
                    disabled
                    v-model="formData.deptName"
                    placeholder="请输入部门"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职员" prop="userName">
                  <el-input
                    disabled
                    v-model="formData.userName"
                    placeholder="请输入职员"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="仓库" prop="warehouseName">
                  <el-input
                    disabled
                    v-model="formData.warehouseName"
                    placeholder="请输入仓库"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    disabled
                    v-model="formData.remark"
                    placeholder="请输入备注 "
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <!-- 采购明细 -->
          <el-collapse-item name="采购明细" disabled>
            <template #title>
              <TitleName
                title="采购明细"
                icon="i-carbon-bookmark-filled"
                class="text-#000"
              ></TitleName>
            </template>
            <avue-crud
              ref="crudProduct"
              :disabled="
                !formDisabled
                  ? fieldDisabled.indexOf('采购明细') == -1
                    ? false
                    : true
                  : true
              "
              :option="crudOptionProduct"
              :data="formData.productInfoList"
              class="hide-required-asterisk"
            >
              <template #menu="{ row, index }">
                <el-button
                  :disabled="row.warehouseStatus == 1"
                  plain
                  icon="Delete"
                  link
                  @click="outbound(row, index)"
                  >重新出库</el-button
                >
              </template>
              <template #empty>
                <div>暂无数据</div>
              </template>
            </avue-crud>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
  </div>
</template>
<script setup name="OutboundForm">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import {
  crudOption, // 子表公用配置
  pay_type, //付款方式
  settle_type, //结算方式
  order_property //订单属性
} from '@/hooks/dict/order'
import { getInnerOrderOutbound, reOutbound } from '@/api/indentManage/indent'
import { isMoneyNot, validateLen } from '@/utils/validate'
import useUserStore from '@/store/modules/user'
import useCommonStore from '@/store/modules/common'

const commonStore = useCommonStore()

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()
const props = defineProps({
  purchaseOrderId: {
    type: [Number, String],
    require: false
  },
  id: {
    type: [Number, String],
    require: false
  }
})
const data = reactive({
  loading: false,
  formData: {},
  formRules: {
    title: [
      {
        required: true,
        message: '请输入订单标题',
        trigger: 'blur'
      },
      validateLen(100)
    ],
    property: [
      {
        required: true,
        message: '请选择订单属性',
        trigger: 'change'
      }
    ],
    customerId: [
      {
        required: true,
        message: '请选择客户名称',
        trigger: 'change'
      }
    ],
    proProperty: [
      {
        required: true,
        message: '请选择产品属性',
        trigger: 'change'
      }
    ],
    proType: [
      {
        required: true,
        message: '请选择产品类型',
        trigger: 'change'
      }
    ],
    number: [
      {
        required: true,
        message: '请输入订单编号',
        trigger: 'blur'
      }
    ],
    businessType: [
      {
        required: true,
        message: '请选择所属业务分类',
        trigger: 'change'
      }
    ],
    deptId: [
      {
        required: true,
        message: '请选择所属公司',
        trigger: 'change'
      }
    ],
    transactionDept: [
      {
        required: false,
        message: '请选择业务部门',
        trigger: 'change'
      }
    ],
    _transactionId: [
      {
        required: false,
        message: '请选择业务员',
        trigger: 'change'
      }
    ],
    price: [
      {
        required: true,
        message: '请输入订单金额',
        trigger: 'blur'
      },
      {
        validator: isMoneyNot
      }
    ]
  },
  activeNames: ['基本信息', '采购明细', '付款计划', '其他信息'],
  crudOptionProduct: {
    ...crudOption, // 子表公用配置
    header: false,
    column: [
      {
        label: '物料名称',
        prop: 'name',
        cell: false,
        minWidth: '100'
      },
      {
        label: '物料编号',
        prop: 'number',
        minWidth: '100',
        cell: false
      },
      {
        label: '规格型号',
        prop: 'specification',
        minWidth: '100',
        cell: false
      },
      {
        label: '单位',
        prop: 'unit',
        minWidth: '100',
        cell: false
      },
      {
        label: '数量',
        prop: 'num',
        cell: false
      },
      {
        label: '仓库编码',
        prop: 'warehouseNumber',
        cell: false
      },
      {
        label: '仓库名称',
        prop: 'warehouseName',
        cell: false
      },
      {
        label: '来源单据编号',
        prop: 'sourceOrderNumber',
        cell: false
      },
      {
        label: '出库库信息',
        prop: 'warehouseMsg',
        cell: false
      },
      {
        label: '备注',
        prop: 'remark',
        cell: false
      }
    ]
  },
  dialogData: {
    open: false
  },
  showTrainingIndustry: '',
  userOption: {}, //人员选择下拉
  customerOption: {}, //客户选择下拉
  dialogParam: {},
  dialogParamA: {},
  fieldDisabled: [], //禁用字段
  formDisabled: true, // 禁用表单
  bpmnStatus: '' //表单标题
})
let {
  loading,
  formData,
  formRules,
  activeNames,
  crudOptionProduct,
  fieldDisabled,
  formDisabled
} = toRefs(data)

watch(
  [() => props.id, () => route.query.id],
  async () => {
    if (props.id) {
      await getFormData(props.id)
    }
    if (route.query.id && route.name == type.name) {
      await getFormData(route.query.id)
    }
  },
  {
    immediate: true
  }
)

// 获取表单信息
async function getFormData(id) {
  loading.value = true
  let res = await getInnerOrderOutbound(id)
  if (res.code !== 200) return
  let resData = {}
  resData = res.data
  formData.value = resData
  loading.value = false
}
// 重新出库库
const outbound = (row, index) => {
  reOutbound(row.id).then(res => {
    proxy.$modal.msgSuccess('出库成功')
    getFormData(formData.value.id)
    console.log('重新出库结果==>', res)
  })
}
</script>
<style scoped>
* {
  --contentColor: #424242;
}
.form-box :deep(.w-full) {
  width: 100%;
}
/* .order-form :deep(.avue-crud__menu) {
  border-bottom: 1px solid #eee;
} */
.form-box:deep(.form-title:before) {
  content: '▋';
  display: inline-block;
  color: #409eff;
}

:deep(.avue-crud__empty) {
  padding: 0;
}
:deep(.el-input.is-disabled .el-input__inner),
:deep(.el-radio__input.is-disabled + span.el-radio__label) {
  color: var(--contentColor);
  -webkit-text-fill-color: var(--contentColor);
}
:deep(.el-radio__input.is-disabled.is-checked .el-radio__inner::after) {
  width: 8px;
  height: 8px;
  background-color: var(--contentColor);
}
</style>
